<template>
  <div class="statics">
      <group>
        <datetime @on-change="timeChange" v-model="startTime" title="开始时间"></datetime>
      </group>
      <group>
        <datetime @on-change="timeChange" v-model="endTime" title="结束时间"></datetime>
      </group>
    <scroller style="top:114px;">
        <div style="padding-bottom:130px;">
            <group>
                <div id="price" style="width: 100%;height: 400px;"></div>
            </group>
            <group>
                <div id="Ranking" style="width: 100%;height: 600px;"></div>
            </group>
        </div>
    </scroller>
  </div>
</template>
<script>
import { Group, Datetime, XTable } from "vux";
import echarts from "echarts";
export default {
  name: "statics",
  data() {
    return {
      startTime: new Date().toLocaleDateString("CH").replace(/\//g, "-"),
      endTime: new Date().toLocaleDateString("CH").replace(/\//g, "-"),
      priceData: [],
      priceTime: [],
      rankData: [],
      rankName: []
    };
  },
  components: {
    Group,
    Datetime,
    XTable
  },
  methods: {
    drawline(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          text: "订单金额",
          padding: 15,
          left: "center"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: this.priceTime
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "价格",
            type: "line",
            stack: "总量",
            data: this.priceData,
            itemStyle: {
              normal: {
                color: "#33B7FF"
              }
            }
          }
        ]
      });
    },
    drawbar(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          text: "商品销量排行（TOP10）",
          padding: 15,
          left: "center"
        },
        xAxis: {
          type: "value"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        yAxis: {
          type: "category",
          data: this.rankName
        },
        series: [
          {
            name: "2011年",
            type: "bar",
            data: this.rankData,
            itemStyle: {
              normal: {
                color: "#33B7FF"
              }
            }
          }
        ]
      });
    },
    orderMoney() {
      this.$http
        .get("/api/supplier.fin_report/index", {
          params: {
            step_section: "search",
            time_s: this.startTime,
            time_e: this.endTime
          }
        })
        .then(res => {
          let priceTime = []
          let priceData = []
          for (const key in res.data.data) {
            if (key != "total") {
              priceTime.push(key);
              priceData.push(res.data.data[key].order_money);
            }
          }
          this.priceTime = priceTime
          this.priceData = priceData
          this.drawline("price");
        });
    },
    goodsRanking() {
      this.$http
        .get("/api/supplier.fin_report/goods_sale", {
          params: {
            step_section: "search",
            time_s: this.startTime,
            time_e: this.endTime
          }
        })
        .then(res => {
          // console.log(res);
          this.drawbar("Ranking");
        });
    },
    timeChange() {
      this.orderMoney();
      this.goodsRanking();
    }
  },
  created() {
    this.orderMoney();
    this.goodsRanking();
  }
};
</script>
<style scoped lang="less">

</style>